<template>
  <div class="usercenter-box">
    <div class="common-usercenter-box" style="min-height: 900px;">
      <h6 class="common-title">用户等级提升</h6>
      <div class="myorderbox common-form-set">
        <el-form
          class="self-update-form">
          <el-form-item
            label="用户当前等级">
            {{ user.userLevel ? user.userLevel.levelName : '' }}
          </el-form-item>
          <el-form-item
            label="目标提升等级">
            <el-select v-model="level" placeholder="请选择">
              <el-option
                :label="target.levelName || '无'"
                :value="target.levelName || '无'">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="升级所需费用">
            {{ target.upgradeFee || 0 }} 元
          </el-form-item>
          <el-form-item label="　">
            <el-button type="primary" @click="doUpdate">确认升级</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import DateFilter from '@/components/dateFilter2'
import pageMixin from '@/mixins/page'
import orderDetailDialog from '@/components/orderDetailDialog'
import { mapState } from 'vuex'
export default {
  layout: 'webIn4',
  components: {
    DateFilter,
    orderDetailDialog
  },
  mixins: [pageMixin],
  data() {
    return {
      isLoading: false,
      target: {},
      level: '',
    }
  },
  computed: {
    ...mapState({
      user: (state) => state.user
    })
  },
  async mounted() {
    this.isLoading = true
    const res = await this.$axios.get('/site/userLevel/getUpgradeLevel')
    if (res.code === 1001 && res.body) {
      this.target = res.body
    }
    this.isLoading = false
  },
  methods: {
    async doUpdate() {
      const money = this.user.userMoney ? this.user.userMoney.money : 0
      if (money < this.target.upgradeFee) {
        return this.$message.error('当前余额不足，请充值后进行升级')
      }
      this.isLoading = true
      const res = await this.$axios.post('/site/userLevel/upgradeLevel', null, {
        params: { levelID: this.target.levelID }
      })
      if (res.code === 1001) {
        this.$message.success('升级成功')
        this.$router.push('/account4')
      }
      this.isLoading = false
    }
  }
}
</script>
<style>
@import 'assets/style/el-adapter.css';
</style>
<style lang="scss" scoped>

// @import 'assets/style/layer.css';
@import 'assets/style/layui.css';
@import 'assets/style/style6/common.css';
// @import 'assets/style/style6/openlogin.css';
// @import 'assets/style/style6/style.css';
// @import 'assets/style/style6/font_1451715_0505c2bxv7b7.css';
// @import 'element-ui/lib/theme-chalk/index.css';

</style>

<style lang="scss">
.usercenter-box .self-update-form {
  margin-left: 70px;
  .el-form-item {
    label {
      min-width: 100px;
    }
  }
}
</style>
